<template>
	<view class="content">
		<view class="main">
			<view class="choseimg">
				<image class="img" :src="chosedImgUrl" mode="aspectFit"></image>
				<button class="btnn" type="default" @click="chooseImg">上传图片</button>
			</view>
			<form @submit="formSubmit" @reset="formReset">
				<view class="uni-form-item uni-column inp">
					<view class="title">书名:</view>
					<input class="uni-input inpu" name="bookName" maxlength="10" v-model="bookName"
						:placeholder="bookName" />
				</view>
				<view class="uni-form-item uni-column inp">
					<view class="title">IBSN:</view>
					<input class="uni-input inpu" name="IBSN" maxlength="13" v-model="IBSN" :placeholder="IBSN" />
				</view>
				<view class="uni-form-item uni-column inp">
					<view class="title">价格:</view>
					<input class="uni-input inpu" name="price" maxlength="9" v-model="price" :placeholder="price" />
				</view>
				<view class="uni-form-item uni-column inp">
					<view class="title">描述:</view>
					<input class="uni-input inpu" name="info" maxlength="40" v-model="bookInfo"
						:placeholder="bookInfo" />
				</view>
				<view class="uni-form-item uni-column pull">
					<picker @change="bindPickerChange" :range="array">
						<label>书籍种类：</label>
						<label class="bounce">{{array[index]}}</label>
					</picker>
				</view>
				<view class="uni-btn-v btns">
					<button class="btn" form-type="submit">确认修改</button>
					<button class="btn" type="default" form-type="reset">Reset</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bookName: '',
				IBSN: '',
				price: '',
				bookInfo: '',
				id: '',
				chosedImgUrl: '',
				array: ["教科书", "专业相关书籍", "课外阅读"],
				index: 0
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			async init() {
				try {
					const page = await getCurrentPages()
					let x = page.length - 1
					let ImgUrl = getApp().globalData.ImgUrl
					let options = page[x].options
					// console.log(options)
					this.bookName = options.bookName
					this.IBSN = options.IBSN
					this.price = options.price
					this.bookInfo = options.bookInfo
					this.id = options.id
					uni.downloadFile({
						url: options.bookImage,
						success: (res) => {
							// console.log(res)
							this.chosedImgUrl = res.tempFilePath
						}
					})
				} catch (res) {
					// console.log("wrong", res)
				}
			},
			formSubmit: function(e) {
				let token = uni.getStorageSync('token')
				let formdata = e.detail.value
				let typeid = Number(this.index) + Number(1)
				let bookName = formdata.bookName
				let IBSN = formdata.IBSN
				if (IBSN.length != 13) {
					uni.showToast({
						title: "IBSN格式不正确!",
						icon: "error"
					})
					return;
				}
				let price = Number(formdata.price)
				let info = formdata.info
				let imgUrl = this.chosedImgUrl
				// uni.showModal({
				// 	content: '表单数据内容：' + JSON.stringify(formdata) + this.chosedImgUrl,
				// 	showCancel: false
				// });
				if (!token) {
					uni.showToast({
						title: "请先登录!",
						icon: "error"
					})
				} else {
					let BaseUrl = getApp().globalData.BaseUrl
					uni.uploadFile({
						url: BaseUrl + '/saleBook/update',
						filePath: imgUrl,
						method: "POST",
						name: 'file',
						header: {
							"Content-Type": "multipart/form-data",
							'token': token
						},
						formData: {
							bookName: bookName,
							IBSN: IBSN,
							price: price,
							bookInfo: info,
							id: this.id
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							if (data.code == 200) {
								uni.showToast({
									title: "修改成功!"
								})
								setTimeout(() => {
									uni.reLaunch({
										url: '../index/index',
									})
								}, 1000)

							} else {
								uni.showToast({
									title: "修改失败!",
									icon: "error"
								})
							}
						}
					})
				}
			},
			formReset: function(e) {
				// console.log('清空数据')
				this.chosedImgUrl = ''
			},
			chooseImg() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						// console.log(res)
						if (res.tempFilePaths.length > 0) {
							let filePath = res.tempFilePaths[0]
							wx.compressImage({
								src: filePath,
								quality: 20,
								success: (ress) => {
									this.chosedImgUrl = ress.tempFilePath
								}
							})
						}
					}
				})
			},
			bindPickerChange(e) {
				this.index = e.target.value
				this.jg = this.array[this.index]
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: 100%;
		background-color: #E1FFFF;
		position: relative;
	}

	.inp {
		display: flex;
		margin-bottom: 30upx;
		margin-left: 30upx;
		margin-right: 30upx;
		padding-left: 15upx;
		background-color: #B0C4DE;
		border-radius: 30upx;
		box-shadow: 0 0 10upx #888;

		.inpu {
			width: 80%;
			padding-left: 15upx;
		}
	}

	.pull {
		margin: 20upx 40upx;

		.bounce {
			font-size: 32upx;
			padding: 5upx;
			border: 1px black solid;
			border-radius: 10upx;
		}
	}

	.btns {
		display: flex;
		// margin-top: 80upx;
	}

	.main {
		width: 90%;
		background-color: #FFFFFF;
		margin: 0 auto;
		border-radius: 30upx;
		box-shadow: 0 0 10upx #888;
		height: 1150upx;
		position: relative;
		top: 50upx;

		.img {
			margin: 20upx 150upx;
			border-radius: 30upx;
			box-shadow: 0 0 10upx #888;
			overflow: hidden;
			width: 375upx;
			max-height: 450upx;
		}

		.btnn {
			width: 230upx;
			margin-bottom: 30upx;
			position: relative;
			box-shadow: 0 0 10upx #888;
		}
	}
</style>
